<template>
  <div style="padding: 50px" class="table-data">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      v-loading="dataloading"
      element-loading-text="数据正在加载中"
      element-loading-spinner="el-icon-loading"
    >
      <template slot="empty">
        <div>
          <span v-if="!dataloading">暂无数据</span>
        </div>
      </template>
      <el-table-column
        :prop="item.field"
        :label="item.label"
        :key="item.field"
        align="center"
        v-for="item in tableHead"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
    tableHeadConfig: {
      type: Array,
      default: () => {},
    },
    tableLoadData: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  // watch: {
  //   flag(val) {
  //     console.log(val);
  //     this.dataloading = !val;
  //   },
  // },
  computed: {
    dataloading() {
      return !this.flag;
    },
    tableData() {
      return this.tableLoadData;
    },
    tableHead() {
      return this.tableHeadConfig;
    },
  },

  methods: {},
};
</script>
<style lang="less" scoped></style>
